<!--<script src="__CDN__/assets/libs/jquery/dist/jquery.start.js"></script>
<script src="__CDN__/assets/addons/tongcheng/js/vue.js"></script>
<link rel="stylesheet" type="text/css" href="__CDN__/assets/addons/tongcheng/css/common.css"></link>-->

<!--<div class="alert alert-info-light" style="margin-bottom:10px;">
  <b>提示：</b>用户配送距离超出配置的最大距离规则时，将无法配送（前端提示：距离超出配送范围）。
</div>-->


<form id="edit-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action="">
  <div class="form-group hide">
    <label class="control-label col-xs-12 col-sm-2">{:__('Module_id')}:</label>
    <div class="col-xs-12 col-sm-8">
      <input id="c-module_id" data-rule="required" data-source="tongcheng/module/index" class="form-control selectpage"
             name="row[module_id]" type="text" value="{$row.module_id|htmlentities}" disabled>
    </div>
  </div>

  <div class="form-group">
    <label class="control-label col-xs-12 col-sm-2">{:__('Open_surcharge')}:</label>
    <div class="col-xs-12 col-sm-8 m-t-5">
      <input id="c-open_surcharge" name="row[open_surcharge]" type="hidden" value="{$row.open_surcharge}">
      <a href="javascript:;" data-toggle="switcher" class="btn-switcher" data-input-id="c-open_surcharge" data-yes="1"
         data-no="0">
        <i class="fa fa-toggle-on text-success {eq name=" $row.open_surcharge" value="0"}fa-flip-horizontal text-gray{/eq}
        fa-2x"></i>
      </a>
    </div>
  </div>

  <div class="form-group">
    <label class="control-label col-xs-12 col-sm-2">特殊时段配置:</label>
    <div class="col-xs-12 col-sm-10">
      <!--<input id="c-surcharge_config" name="row[surcharge_config]" type="hidden" value='{:json_encode($row.surcharge_config)}'>-->

      <!--<dl class="fieldlist" data-name="row[surcharge_config]" data-template="surchargeConfigTpl">
        <dd>
          <ins>费用项名称</ins>
          <ins>开始时间</ins>
          <ins>结束时间</ins>
          <ins>费用（元）</ins>
          <ins>开关</ins>
        </dd>
        <dd>
          <a href="javascript:;" class="btn btn-sm btn-success btn-append"><i class="fa fa-plus"></i> 追加</a>
        </dd>
        <textarea name="row[surcharge_config]" class="form-control hide" cols="30" rows="5">{:json_encode($row.surcharge_config)}</textarea>
      </dl>

      <script type="text/html" id="surchargeConfigTpl">
        <dd class="form-inline">
          <input type="text" name="row[<%=name%>][<%=index%>][name]" class="form-control" value="<%=row['name']%>" size="10">
          <input type="text" name="row[<%=name%>][<%=index%>][start]" class="form-control datetimepicker" data-date-format='HH:mm:ss' value="<%=row['start']%>" size="30">
          <input type="text" name="row[<%=name%>][<%=index%>][end]" class="form-control datetimepicker" data-date-format='HH:mm:ss' value="<%=row['end']%>" size="30">
          <input type="text" name="row[<%=name%>][<%=index%>][fee]" class="form-control" value="<%=row['fee']%>" size="30">

          <input type="checkbox" name="row[<%=name%>][<%=index%>][status]" value="1" <%=row['status'] == 1 ? 'checked' : ''%>>

          <span class="btn btn-sm btn-danger btn-remove"><i class="fa fa-times"></i></span>
        </dd>
      </script>-->


      <table class="table table-responsive fieldlist" data-name="row[surcharge_config]" data-template="surchargeConfigTpl" data-tag="tr">
        <tr>
          <td>费用项名称</td>
          <td>开始时间</td>
          <td>结束时间</td>
          <td>费用（元）</td>
          <td>开关</td>
          <td></td>
        </tr>
        <tr>
          <td colspan="5"><a href="javascript:;" class="btn btn-sm btn-success btn-append"><i class="fa fa-plus"></i> 追加</a></td>
        </tr>
        <textarea name="row[surcharge_config]" class="form-control hide" cols="30" rows="5">{:json_encode($row.surcharge_config)}</textarea>
      </table>

      <script type="text/html" id="surchargeConfigTpl">
        <tr class="form-inline">
          <td><input type="text" name="row[<%=name%>][<%=index%>][name]" class="form-control" value="<%=row['name']%>" size="10"></td>
          <td><input type="text" name="row[<%=name%>][<%=index%>][start]" class="form-control datetimepicker" data-date-format='HH:mm:ss' value="<%=row['start']%>" size="10"></td>
          <td><input type="text" name="row[<%=name%>][<%=index%>][end]" class="form-control datetimepicker" data-date-format='HH:mm:ss' value="<%=row['end']%>" size="10"></td>
          <td><input type="text" name="row[<%=name%>][<%=index%>][fee]" class="form-control" value="<%=row['fee']%>" size="10"></td>
          <td><input type="checkbox" name="row[<%=name%>][<%=index%>][status]" value="1"></td>
          <td><span class="btn btn-sm btn-danger btn-remove"><i class="fa fa-times"></i></span> <span class="btn btn-sm btn-primary btn-dragsort"><i class="fa fa-arrows"></i></span></td>
        </tr>
      </script>
    </div>

  </div>

  <div class="form-group layer-footer">
    <label class="control-label col-xs-12 col-sm-2"></label>
    <div class="col-xs-12 col-sm-8">
      <button type="submit" class="btn btn-primary btn-embossed disabled">{:__('OK')}</button>
      <button type="reset" class="btn btn-default btn-embossed">{:__('Reset')}</button>
    </div>
  </div>
</form>

<script>
  // var valid_result = false;
  // var _surcharge_config = '{:json_encode($row.surcharge_config)}';//$('#c-surcharge_config').val()
  // var _controller = null
  // var _form = null

  /*var app = new Vue({
    el: '#app',
    data: {
      surcharge_config: [],
    },
    created() {
      let surcharge_config = []
      if (_surcharge_config) {
        surcharge_config = JSON.parse(_surcharge_config)
      }
      if (!surcharge_config) {
        this.surcharge_config = []
        // this.surcharge_config.push({
        //   start: 0,
        //   end: 5,
        //   fee: 1,
        // })
      } else {
        this.surcharge_config = surcharge_config
      }
      console.log('this.surcharge_config', this.surcharge_config, surcharge_config, _surcharge_config)

      this.getForm()
    },
    methods: {
      getForm() {
        var timer = setInterval(() => {
          if (_form) {
            clearInterval(timer);
            console.log('_form3', _form);
            this.bindForm();
          }
        }, 500);
      },
      bindForm() {
        _form.api.bindevent($("form[role=form]"), function(data, ret){
          console.log('bindevent', data, ret);
          if (ret.code == 1) {
            Fast.api.close(data);
          }
          return false;
        });
      },
      // 加规则
      add() {
        this.surcharge_config.push({
          name: '',
          start: '',
          end: '',
          fee: 0,
          status: 0,
        })

        if (_controller) {
          console.log('trigger bindevent', _controller.api)
          // _controller.api.bindevent();
          setTimeout(() => {
            _controller.api.bindevent();
          }, 500);
        }
      },
      remove(index) {
        this.surcharge_config.splice(index, 1)
      },

      // 验证
      valid() {
        console.log('trigger valid')
        if (!$('#c-open_surcharge').val()) {
          valid_result = true
          return true
        }

        if (this.surcharge_config.length === 0) {
          Fast.api.msg('请配置完整的特殊时段规则')
          valid_result = false
          return false
        }

        valid_result = true
      }
    }
  })*/
</script>
